<template>
  <div>
    <!-- 面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="navigation">
      <el-breadcrumb-item :to="{ path: '/home' }">短信</el-breadcrumb-item>
      <el-breadcrumb-item>信息板</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 数据统计-->
    <el-row :gutter="1">
      <el-col :span="6">
        <div class="statistics" style="background:#409eff">
          <div class="title">
            <p>短信日志用户统计</p>
            <el-tag size="mini" type="success">实时</el-tag>
          </div>
          <div class="num">{{ totalSmsLogSum }}</div>
          <div class="tip">当前短信日志用户数量</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics" style="background:#E6A23C">
          <div class="title">
            <p>短信日志待发送用户统计</p>
            <el-tag size="mini" type="info">实时</el-tag>
          </div>
          <div class="num">{{ totalSmsUnset }}</div>
          <div class="tip">待发送用户数量</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics" style="background:#67C23A">
          <div class="title">
            <p>今日待发送用户统计</p>
            <el-tag size="mini" type="warning">实时</el-tag>
          </div>
          <div class="num">{{ totalTodaySum }}</div>
          <div class="tip">今日待发送数量</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics" style="background:#909399">
          <div class="title">
            <p>今日已发送用户统计</p>
            <el-tag size="mini" type="primary">实时</el-tag>
          </div>
          <div class="num">{{ totalToDaySucceed }}</div>
          <div class="tip">今日已发送用户数量</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div>
        <div id="echartsdemo" ref="container"></div>
      </div>
    </el-row>
  </div>
</template>

<script>
import {listSmsLog, SmsLogUnset, SmsLogTodaySum, SmsLogTodaySucceed, SmsLogUserStatistic} from "../api/smsMes";
import * as ec from 'echarts';

export default {
  name: "SmsMes",
  data() {
    return {
      echartsinstance: null,
      options: {
        // 标题设置
        title: {text: '短信日志信息统计表'},
        tooltip: {},//提示框
        legend: {// 数据标识
          data: ["数量"]
        },
        // x轴标记
        xAxis: {
          data: ["短信日志用户数量", "待发送用户数量", "今日待发送用户数量", '今日已发送用户数量']
        },
        // y轴标记
        yAxis: {},
        // 数据系列
        series: [
          {
            name: '数量',
            type: 'bar',
            data: [0,0,0,0]
          }
        ]
      },
      totalSmsLogSum: null,
      totalSmsUnset: null,
      totalTodaySum: null,
      totalToDaySucceed: null
    }
  },
  created() {
    this.getUserList();
    this.getSmsLogUnset();
    this.getSmsLogTodaySum();
    this.getSmsLogTodaySucceed();
    this.changeData();
  },
  mounted() {
    this.echartsinstance = ec.init(this.$refs.container)
    this.echartsinstance.setOption(this.options)
  },
  watch: {
    options() {
      this.echartsinstance.setOption(this.options)
    }
  },
  methods: {
    getUserList() {
      listSmsLog().then(response => {
        this.totalSmsLogSum = response.data
      })
    },
    getSmsLogUnset() {
      SmsLogUnset().then(response => {
          this.totalSmsUnset = response.data
        }
      )
    },
    getSmsLogTodaySum() {
      SmsLogTodaySum().then(response => {
          this.totalTodaySum = response.data
        }
      )
    },
    getSmsLogTodaySucceed() {
      SmsLogTodaySucceed().then(response => {
          this.totalToDaySucceed = response.data
        }
      )
    },
    changeData() {
      SmsLogUserStatistic().then(response => {
        this.echartsinstance.setOption({
          series: [
            {
              name: '数量',
              type: 'bar',
              data: response.data
            }
          ]
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.navigation {
  margin-top: 15px;
  font-size: 25px;
}

.el-row {
  padding: 0 9px;

  .statistics {
    margin-top: 5px;
    color: white;
    height: 200px;
    border-radius: 4px;
    padding: 0 8px;

    .title {
      display: flex; // 弹性布局
      justify-content: space-between; // 两边对齐
      align-items: center; // 垂直居中
    }

    p {
      font-size: 13px;
      font-weight: bold;
    }

    .num {
      font-size: 30px;
      font-weight: bold;
      text-align: center;
      margin-top: 25px;
    }

    .tip {
      font-size: 15px;
    }
  }
}

#echartsdemo {
  width: 800px;
  height: 600px;
}
</style>
